<template>
  <div class="customer">
    <van-nav-bar
        title="拓天销售出库列表"
        left-arrow
        left-text="返回"
        @click-left="back"
    />
    <van-search
        v-model="fnumber"
        shape="round"
        show-action
        background="#57a3f3"
        placeholder="请输入产品代码"
    >
      <template #action>
        <van-button round  size="small" type="info" @click="onSearch(1)" style="width: 60px;">查询</van-button>
      </template>
    </van-search>
    <div style="width: 100%;height: 100%;background: #ffffff;margin-top: 10px">
      <van-list style="overflow: scroll">
        <div class="listColumn">
          <div>日期</div>
          <div>客户名称</div>
          <div>单据编号</div>
          <div>产品代码</div>
          <div>产品名称</div>
          <div>规格</div>
          <div>销售数量</div>
          <div>数量</div>
        </div>
        <div class="listItem" v-for="(task, index) in taskList" :key="index" @click="toDetail(task)">
          <div>{{ task.FDate }}</div>
          <div>{{ task.FCust }}</div>
          <div>{{ task.FBillNo }}</div>
          <div>{{ task.FNumber }}</div>
          <div>{{ task.FName }}</div>
          <div>{{ task.FModel }}</div>
          <div>{{ task.FUnit }}</div>
          <div>{{ task.FAuxQty }}</div>
        </div>
      </van-list>
    </div>
    <div>
      <van-pagination v-model="pageNo" mode="simple" :total-items="total" :show-page-size="6" :items-per-page="pageSize" force-ellipses @change="changePg">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import { ttxsckQywxList } from '@/api/api'
import { Notify } from 'vant'

export default {
  name: "ttSalesOutOrder",
  data () {
    return {
      loading: false,
      fnumber: '', // 单据编号
      pageNo:1,
      total: 0, // 总页数
      pageSize: 20, //每页显示条数
      taskList: []
    }
  },
  computed: {
    ...mapState({
      openId: state => state.user.openId
    })
  },
  mounted() {
  },
  created () {
    this.getList(1)
  },
  methods: {
    changePg () {
      this.getList(this.pageNo)
    },
    onSearch (pageNo) {
      this.getList(pageNo)
    },
    getList (pageNo) {
      ttxsckQywxList({
        fnumber: this.fnumber,
        open_id: this.openId,
        pageNo: pageNo,
        pageSize: this.pageSize
      }).then(res => {
        if (res.success) {
          this.taskList = res.result.records
          this.total = res.result.total
        }else {
          Notify({ type: 'danger', message: res.message, duration: 4000 })
        }

      })
    },
    //详情
    toDetail(task) {
      // this.$router.push({
      //   name: 'dnPickDetail',
      //   params: {
      //     seorderfbillno: task.seorderfbillno
      //   }
      // })
    },
    back () {
      this.$router.push({name: 'modules'})
    },
  }
}
</script>

<style scoped>
.customer{
  min-height: 100vh;
  background: #ffffff;
}
.listColumn{
  width: 2000px;
  display: flex;
  line-height: 45px;
  background: #eee;
}
.listColumn div:nth-of-type(1) {
  width: 100px;
}
.listColumn div:nth-of-type(2) {
  width: 400px;
}
.listColumn div:nth-of-type(3) {
  width: 100px;
}
.listColumn div:nth-of-type(4) {
  width: 400px;
}
.listColumn div:nth-of-type(5) {
  width: 400px;
}
.listColumn div:nth-of-type(6) {
  width: 400px;
}
.listColumn div:nth-of-type(7) {
  width: 100px;
}
.listColumn div:nth-of-type(8) {
  width: 100px;
}
.listItem{
  width: 2000px;
  display: flex;
  line-height: 38px;
  border-bottom: 1px solid #eeeeee;
}
.listItem div:nth-of-type(1) {
  width: 100px;
}
.listItem div:nth-of-type(2) {
  width: 400px;
}
.listItem div:nth-of-type(3) {
  width: 100px;
}
.listItem div:nth-of-type(4) {
  width: 400px;
}
.listItem div:nth-of-type(5) {
  width: 400px;
}
.listItem div:nth-of-type(6) {
  width: 400px;
}
.listItem div:nth-of-type(7) {
  width: 100px;
}
.listItem div:nth-of-type(8) {
  width: 100px;
}
</style>